<script setup>
import { ref } from 'vue'
import * as ArcoIcons from '@arco-design/web-vue/es/icon'

const props = defineProps({
  modelValue: String,
  visible: Boolean
})

const emit = defineEmits(['update:modelValue', 'update:visible'])

const searchText = ref('')
const icons = ref(Object.keys(ArcoIcons).filter(name => name.startsWith('Icon')))

const handleSelect = (icon) => {
  emit('update:modelValue', icon)
  emit('update:visible', false)
}
</script>

<template>
  <a-modal
      title="选择图标"
      :visible="visible"
      @update:visible="val => emit('update:visible', val)"
      :footer="false"
      width="60%"
      :body-style="{ maxHeight: '70vh', overflow: 'auto' }"
  >
    <a-input
        v-model="searchText"
        placeholder="搜索图标"
        allow-clear
    />

    <div class="icon-container">
      <div
          v-for="icon in icons.filter(i => i.toLowerCase().includes(searchText.toLowerCase()))"
          :key="icon"
          class="icon-item"
          @click="$emit('update:modelValue', icon)"
      >
        <!-- 直接使用图标组件 -->
        <component :is="ArcoIcons[icon]" :size="24" @click="handleSelect(icon)"/>
        <span>{{ icon.replace('Icon', '') }}</span>
      </div>
    </div>
  </a-modal>
</template>

<style scoped>
.icon-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.icon-item:hover {
  background-color: var(--color-fill-2);
}

.icon-item span {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  word-break: break-all;
}
</style>